<template>
	<view class="aspect-ratio" :style="style">
		<view class="main-view">
			<slot></slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed } from 'vue'

	const props = defineProps({
		aspectRatio: {
			type: Number,
			default: 1,
		},
	})

	const style = computed(() => {
		return { 'padding-top': `calc(100% / ${props.aspectRatio})` }
	})
</script>

<style lang="scss" scoped>
	.aspect-ratio {
		position: relative;
		width: 100%;
	}

	.main-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>